<template>
    <div>
        <a-layout>
            <a-layout-header class="header" style="background: #378BF1">
                <div class="logo"/>
                <!--顶部导航-->
                <a-menu
                        style="background: #378BF1"
                        mode="horizontal"
                        :style="{ lineHeight: '63px' }"
                >
                    <a-menu-item key="key_home">
                        <a style="color:whitesmoke;margin-right: 30px" href="/cell-center"> 卖家工作台</a>
                    </a-menu-item>

                    <a-menu-item class="center-menu-item" @mouseover="openGoodsMenu(true)">
                        商品
                    </a-menu-item>

                    <a-menu-item class="center-menu-item" @mouseover="openOrderMenu(true)">
                        订单
                    </a-menu-item>


                </a-menu>
            </a-layout-header>
            <div
                    @mouseleave="onClose()"
                    v-show="goodsDrawer||orderDrawer"
                    class="drawerContainer"
            >
                <a-card v-if="goodsDrawer" :bordered="false">
                    <a class="menu-a" href="/cell-center/cate-choose">
                        <a-card-grid :bordered="false" class="menu-grid">发布宝贝
                            <div style="display: block" class="menu-sub-title">需要事先准备宝贝图片/描述等内容</div>
                        </a-card-grid>
                    </a>
                    <a class="menu-a" href="/cell-center/goods_center">
                        <a-card-grid :bordered="false" class="menu-grid">出售中的宝贝
                            <div style="display: block" class="menu-sub-title">当前正在销售中的宝贝</div>
                        </a-card-grid>
                    </a>
                    <a class="menu-a" href="/cell-center/goods_center_ware">
                        <a-card-grid :bordered="false" class="menu-grid">仓库中的宝贝
                            <div class="menu-sub-title">管理所有已下架的宝贝</div>
                        </a-card-grid>
                    </a>
                    <a class="menu-a" href="/cell-center/comment">
                        <a-card-grid :bordered="false" class="menu-grid">商品评价
                            <div class="menu-sub-title">集中查看商品的评价信息</div>
                        </a-card-grid>
                    </a>

                </a-card>

                <a-card v-if="orderDrawer" :bordered="false">
                    <a class="menu-a" href="/cell-center/order_index">
                        <a-card-grid :bordered="false" class="menu-grid">已卖出的宝贝
                            <div style="display: block" class="menu-sub-title">集中管理所有菜单</div>
                        </a-card-grid>
                    </a>
                   <!-- <a class="menu-a" href="/cell-center/comment">
                        <a-card-grid :bordered="false" class="menu-grid">退款管理
                            <div style="display: block" class="menu-sub-title">
                                集中处理订单退款</div>
                        </a-card-grid>
                    </a>-->
                    <a class="menu-a" href="/cell-center/comment">
                        <a-card-grid :bordered="false" class="menu-grid">发货管理
                            <div class="menu-sub-title">集中处理订单发货</div>
                        </a-card-grid>
                    </a>


                </a-card>


            </div>
            <a-layout-content>
                <!--顶部导航抽屉-->

               <a-row :gutter="[180,8]">
                   <a-col :span="4">
                       <a-menu
                               style="width: 256px;height: 750px"
                               :open-keys.sync="openKeys"
                               mode="inline"
                               @click="handleClick"
                       >
                           <a-sub-menu key="shop-ms">
                               <span slot="title"><a-icon type="shop" theme="twoTone" /><span>店铺管理</span></span>
                              <!-- <a-menu-item key="open_shop">
                                   我要开店
                               </a-menu-item>-->
                               <a-menu-item key="coupon">
                                   优惠券发放
                               </a-menu-item>
                           </a-sub-menu>
                           <a-sub-menu key="pay-ms" @titleClick="titleClick">
                               <span slot="title"><a-icon type="dollar" theme="twoTone"/><span>交易管理</span></span>
                               <a-menu-item key="out-baby">
                                   <router-link to="/cell-center/order_index">已卖出的宝贝</router-link>
                               </a-menu-item>
                               <a-menu-item key="comment">
                                   <router-link to="/cell-center/comment">评价管理</router-link>
                               </a-menu-item>
                           </a-sub-menu>
                           <a-sub-menu key="ship-ms" @titleClick="titleClick">
                               <span slot="title"><a-icon type="car" theme="twoTone"/><span>物流管理</span></span>
                               <a-menu-item key="fahuo">
                                   发货
                               </a-menu-item>
                           </a-sub-menu>
                           <a-sub-menu key="baby-ms" @titleClick="titleClick">
                               <span slot="title"><a-icon type="crown" theme="twoTone"/><span>宝贝管理</span></span>
                               <a-menu-item key="pub-baby">
                                   <a href="/cell-center/cate-choose">发布宝贝</a>
                               </a-menu-item>
                               <a-menu-item key="on-cell">
                                   <router-link to="/cell-center/goods_center">出售中的宝贝</router-link>
                               </a-menu-item>
                               <a-menu-item key="warehouse">

                                   <router-link to="/cell-center/goods_center_ware">仓库中的宝贝</router-link>

                               </a-menu-item>
                           </a-sub-menu>
                           <a-sub-menu key="cus-ms" @titleClick="titleClick">
                               <span slot="title"><a-icon type="sound" theme="twoTone"/><span>客户服务</span></span>
                               <a-menu-item key="refund">
                                   退款管理
                               </a-menu-item>
                           </a-sub-menu>
                           <a-sub-menu key="remarketing" @titleClick="titleClick">
                               <span slot="title"><a-icon type="sound" theme="twoTone"/><span>营销服务</span></span>
                               <a-menu-item key="activity">

                                   <router-link to="/cell-center/activity">活动中心</router-link>
                               </a-menu-item>
                               <a-menu-item key="myApply">

                                   <router-link to="/cell-center/myApply">我的报名</router-link>
                               </a-menu-item>
                           </a-sub-menu>

                       </a-menu>
                   </a-col>
                   <a-col :span="20">
                       <router-view/>

                   </a-col>
               </a-row>

            </a-layout-content>
        </a-layout>


    </div>
</template>

<script>
    import NavBar from "../../components/nav/NavBar";
    import CellNavBar from "../../components/nav/CellNavBar";

    export default {
        name: "cellCenter",
        components: {CellNavBar, NavBar},
        data() {
            return {
                goodsDrawer: false,
                orderDrawer: false,
                openKeys: ['shop-ms','pay-ms','baby-ms','ship-ms','cus-ms','remarketing'],
            }
        },
        watch: {
            openKeys(val) {
                console.log('openKeys', val);
            },
        },
        methods: {
            handleClick(e) {
                let key=e.key
                if (key==="coupon"){
                    this.$router.push("/cell-center/coupon")
                }

            },
            titleClick(e) {
                console.log('titleClick', e);
            },
            openGoodsMenu(open) {
                this.goodsDrawer = open;
                this.orderDrawer = !open;

            },
            openOrderMenu(open) {
                this.orderDrawer = open;
                this.goodsDrawer = !open;

            },
            onClose() {
                this.goodsDrawer = false;
                this.orderDrawer = false;

            },
        }
    }
</script>

<style scoped>

    .center-menu-item {
        margin-left: 100px;
        color: #F9FBFE;
        font-size: 16px;
        font-weight: 200;
        position: relative;
        overflow: hidden;
    }

    .center-menu-item:hover {
        color: #90B6F7;
    }

    .drawerContainer {
        height: 100%;
        overflow: hidden;
        position: relative;
        border: 1px solid #ebedf0;
        border-radius: 2px;
        padding-top: 0px;
        text-align: center;
        background: white;
        z-index: 2;
        -webkit-animation: 2s opacity2 0s infinite;
        -moz-animation: 2s opacity2 0s infinite;
    }

    .menu-grid {
        width: 25%;
        text-align: center;
        box-shadow: none;

    }

    .menu-a {
        color: #333;
        box-shadow: none;
        font-size: 16px;


    }

    /*排除子标题不改变其颜色*/
    .menu-a :hover:not(.menu-sub-title) {
        color: #378BF1;
        background: #F0F1F5;
        border-radius: 15px;
    }

    .menu-sub-title {
        color: #999;
        font-size: 12px;
    }


</style>